<template>
    <p>七日房态</p>
    <el-input class="w-50 m-2" size="large" placeholder="输入房型名称/ID搜索" :suffix-icon="Search" />

    <el-table :data="tableData" style="width: 100%">
        <el-table-column type="expand">
            <template #default="props">
                <div m="4">
                    <el-table :data="props.row.family">
                        <el-table-column label="Name" prop="name" />
                        <el-table-column label="City" prop="city" />
                        <el-table-column label="Address" prop="address" />
                        <el-table-column label="Zip" prop="zip" />
                    </el-table>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="data" prop="date" />
        <el-table-column label="Name" prop="name" />
    </el-table>
</template>

<script lang="ts" setup >
import { Search } from '@element-plus/icons-vue'

import { ref } from 'vue'
const tableData = [
    {
        date: '商务单人间123456789',
        name: '开关',
        family: [
            {
                name: '🏀( 1297950580881) 商务单人间<无早>',
                city: '一限',
                address: '一限',
                zip: '一限',
            },
            {
                name: '🏀( 1297950580882) 商务单人间<含早>',
                city: '一限',
                address: '一限',
                zip: '一限',
            },
            {
                name: '🏀( 1297950580881) 商务单人间<无早>',
                city: '一限',
                address: '一限',
                zip: '一限',
            },
            {
                name: '🏀( 1297950580881) 商务单人间<含早>',
                city: '一限',
                address: '一限',
                zip: '一限',
            },
        ],
    },
]
</script>

<style lang="less" scoped>
p {
    font-size: 16px;
    margin: 15px 0 20px 10px;
}

:deep(.el-input__wrapper) {
    flex-grow: 0;
    width: 500px;
    height: 50px;
    margin-left: 10px;
}
</style>